<template>
    <view style="width: 100%;height: 100vh;background-color: #eeeeee;">
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="false">
			<block slot="left">
				<text @tap="toPage()" class="cuIcon-back" style="font-size: 40rpx;"></text>
			</block>
			<block slot="content">订单中心</block>
		</cu-custom>
		
		
		<scroll-view scroll-x class="bg-white nav" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
				  v-for="(item,index) in tabBars" :key="index" :data-id="item.index" @click="tabSelect(item)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		
		<swiper :current="TabCur" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,index1) in tabBars" :key="index1">
                <scroll-view class="scroll-v list" scroll-y @scrolltolower="loadMore()">
					<view v-if="orderList.length > 0">
						<view v-for="(orderItem,index2) in orderList" :key="orderItem.id">
							<view style="margin: 10upx;background-color: white;" @tap="toOrderDetail(orderItem.id)">
								<view class="uni-flex uni-row" style="border-bottom: solid 3upx #cccccc;height: 70upx;align-items: center;">
									<view style="background-color: #3B4144;margin-left: 20upx;">
										<text style="color: white;padding: 10upx;">
											{{ orderItem.serviceName }}
										</text>
									</view>
									<view style="">
										<text style="margin-left: 20upx;">
											{{ orderItem.createdTime }}
										</text>
									</view>
								</view>
								
								<view class="uni-flex uni-row" style="align-items: center;margin-top: 20upx;">
									<view style="margin-left: 20upx;width: 20upx;height: 20upx;border-radius: 50%;background-color: #1AAD19;"></view>
									<view style="margin-left: 20upx">
										{{ orderItem.location.name }}
									</view>
								</view>
								<view class="uni-flex" style="justify-content: flex-end;">
									<view style="margin-right: 20upx;margin-bottom: 20upx;font-size: 40upx;">
										¥{{ orderItem.realAmount }}
									</view>
								</view>
							</view>
						</view>
						<view class="loading-more" style="text-align: center;color: #B2B2B2;">
							<text class="loading-more-text">{{ loadingText }}</text>
						</view>
					</view>
					<view v-if="orderList.length == 0" class="uni-flex uni-column" style="align-items: center;justify-content: center;height: 70vh;">
						<view>
							<image src="../../static/img/color_order.png" style="width: 200upx;height: 200upx;" mode=""></image>
						</view>
						<view style="text-align: center;color: #B2B2B2;margin-top: 10upx;">
							暂无订单
						</view>
						<view style=";margin-top: 30upx;">
							<button @tap="goMain" type="default" style="border: solid 3upx #ff7c00; background-color: #eeeeee;color: #ff7c00;width: 300upx;border-radius: 0upx;font-size: 30upx;">去下单</button>
						</view>
					</view>
                </scroll-view>
            </swiper-item>
        </swiper>
		
    </view>
</template>

<script>
	
    import {
        mapState,
        mapMutations
    } from 'vuex'
	
    export default {
        components: {
        },
        data() {
            return {
				TabCur: 0,
				tabId: 2, //todo- 初始状态 需要修改
				userInfo: {},
				loadingText: "正在加载···",
				tabBars:[
					{
						"name": "等待接单",
						"index": 0,
						"id": 2,
						"pinyin": "running"
					},
					{
						"name": "维修中",
						"index": 1,
						"id": 3,
						"pinyin": "running"
					},
					{
						"name": "已完成",
						"index": 2,
						"pinyin": "over",
						"id": 4
					},
					{
						"name": "已取消",
						"index": 3,
						"pinyin": "cancle",
						"id": 5
					}
				],
				scrollInto: "",
				orderList: [],
				pageIndex: 1
            }
        },
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.getList()
		},
        methods: {
			toPage(){
				uni.redirectTo({
					url: '../user/user'
				})
			},
			goMain(){
				uni.redirectTo({
					url: '../main/main'
				})
			},
			loadMore(e) {
				this.pageIndex ++
				if(this.orderList.length % 20 != 0){
					this.loadingText = '没有啦！'
				}else{
					this.getList();
				}
            },
			async getList() {
				let res = await this.$api.getOrderList({
					status: this.tabId,
					pageIndex: this.pageIndex
				});
				this.orderList = this.orderList.concat(res.data.data.records)
				if(this.orderList.length < 20){
					this.loadingText = '没有啦！'
				}
            },
			toOrderDetail(id){
				uni.setStorageSync('orderDetail', this.orderList.filter(e => e.id == id)[0])
				uni.navigateTo({
					url: '../orderDetail/orderDetail'
				})
			},
			tabSelect(e) {
				this.TabCur = e.index;
				this.tabId = e.id
				this.pageIndex = 1
			},
			switchTab(index) {
				console.log(this.tabBars[index])
				this.TabCur = index;
				this.tabId = this.tabBars[index].id
                this.scrollInto = this.tabBars[index].pinyin
				this.orderList = []
				this.getList()
            },
			ontabchange(e) {
                let index = e.target.current || e.detail.current;
                this.switchTab(index);
            },
        },
        onReady() {
        }
    }
</script>

<style>
	page {
        width: 100%;
        min-height: 100%;
        display: flex;
    }

    .tabs {
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        background-color: #ffffff;
        height: 100vh;
    }
	
     .scroll-h {
        width: 750upx;
        height: 80upx;
        flex-direction: row;
        white-space: nowrap;
        /* flex-wrap: nowrap; */
        /* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
    }
	
	.line-h {
        height: 1upx;
        background-color: #cccccc;
    }

    .uni-tab-item {
        /* #ifndef APP-PLUS */
        display: inline-block;
        /* #endif */
        flex-wrap: nowrap;
        padding-left: 34upx;
        padding-right: 34upx;
		width: 25%;
		text-align: center;
    }

    .uni-tab-item-title {
        color: #555;
        font-size: 30upx;
        height: 80upx;
        line-height: 80upx;
        flex-wrap: nowrap;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
    }

    .uni-tab-item-title-active {
        color: #ff7c00;
    }

    .swiper-box {
        flex: 1;
		height: 83vh;
    }

    .swiper-item {
        flex: 1;
    }

    .scroll-v {
        flex: 1;
        /* #ifndef MP-ALIPAY */
        flex-direction: column;
        /* #endif */
        width: 750upx;
		height: 1100upx;
    }
</style>
